<template>
	<view>
		<view class="page_title">
		  <nav-back></nav-back>
		  <view class="page_name">实名认证</view>
		  <view class="blank"></view>
		</view>
		<view class="banxin" v-if="authStatus==1">
		  <view class="auth">
		    <view class="why">
		      <image src="/static/img/identity.png" mode=""/>
		      为什么要身份认证？
		    </view>
		    <view class="info">
		      根据《国家网信办安全法》规定，为了你的交友安全，婚恋早台必须要求用户实名身份认证。
		    </view>
		    <view class="tip">
		      所提交信息促供实名认证审核，不会对外公布。
		    </view>
		  </view>
		  <form class="form" @submit="formSubmit" @reset="formReset">
		    <text class="label">真实姓名</text>
		    <view class="my-input" >
			  <input class="uni-input" name="name"  placeholder="请输入姓名" />
		    </view>
		    
		    <text class="label">身份证号</text>
		    <view class="my-input" >
			  <input class="uni-input" name="identity"  placeholder="请输入身份证号" />
		    </view>
		    <button formType="submit" type="primary">开始人脸认证</button>
		  </form>
		</view>
		
		<view class="banxin" v-if="authStatus==0">
		  <view class="auth">
		    <view class="why">
		      <image src="/static/img/auth_success.png" mode=""/>
		      已通过
		    </view>
		    <view class="info">
		      <text>认证方式：人脸认证
		            认证时间：{{authTime}}</text>
		    </view>
		  </view>
		</view>
		
		<view class="banxin" v-if="authStatus==2">
		  <view class="auth">
		    <view class="why">
		      <image src="/static/img/auth_fail.png" mode=""/>
		      未通过
		    </view>
		    <view class="info">
		      <text>认证方式：人脸认证
		            认证时间：{{authTime}}</text>
		    </view>
		  </view>
		  <button type="primary" @click="handleRestart">重新认证</button>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'
	
	export default {
		data() {
			return {
				authStatus:1,
				authTime:''
			};
		},
		components: {
			NavBack
		},
		 onShow() {
		    request(`/employee/${uni.getStorageSync('id')}`).then((res)=>{
		      console.log(res.data.data.authentication,'authentication');
		      let authentication = res.data.data.authentication
			  this.authStatus = authentication.realNameStatus
			  this.authTime = authentication.realNameTime
		    })
		  },
		methods:{
		 formSubmit(e){
			console.log(e.detail.value,'formSubmit');
			let info = e.detail.value
			const nameReg = /^[\u4e00-\u9fa5]{2,10}$/;
			const identityReg= /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|x|X)$/;
			console.log(nameReg.test(info.name),'info');
			if(!info.name){
			  uni.showToast({
				title: '请输入姓名',
				icon: 'none',
				duration: 2000
			  })
			  return
			}
			if(!info.identity){
			  uni.showToast({
				title: '请输入身份证号',
				icon: 'none',
				duration: 2000
			  })
			  return
			}
			if(!nameReg.test(info.name)){
			  uni.showToast({
				title: '姓名格式错误',
				icon: 'none',
				duration: 2000
			  })
			  return
			}else if(!identityReg.test(info.identity)){
			  uni.showToast({
				title: '身份证号格式错误',
				icon: 'none',
				duration: 2000
			  })
			  return
			}
			uni.navigateTo({
			  url: `/pages/userAuth/faceAuth/faceAuth?name=${info.name}&&idCard=${info.identity}`
			})
		  },
		  handleRestart(){
			this.authStatus = 0
		  },
		}
	}
</script>

<style lang="scss">
/* pages/nameauth/nameauth.uniss */

.auth{
  color: rgba(51, 51, 51, 1);
  .why{
    display: flex;
    align-items: center;
    margin-top: 50rpx;
    line-height: 46rpx;
    font-weight: 500;
    image{
      width: 48rpx;
      height: 48rpx;
      margin-right: 20rpx;
      line-height: 45rpx;
    }
  }
  .info{
	  font-size: 24rpx;
    margin-top: 30rpx;
    font-weight: 400;
    line-height: 40rpx;
	text{
		font-size: 24rpx;
	}
  }
  .tip{
    font-size: 24rpx;
    margin-top: 10rpx;
    color: rgba(166, 166, 166, 1);
  }
}

.form{
  display: block;
  margin-top: 50rpx;
  .my-input{
    margin-top: 20rpx;
  }
  .label{
    display: block;
    margin-top: 40rpx;
    font-weight: 500;
    line-height: 48rpx;
    color: rgba(51, 51, 51, 1);;
  }
}
button{
  position: absolute;
  width: 85%;
  bottom: 100rpx;
}

</style>
